<template>
  <div>
    <el-upload
      class="addImg"
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <el-button size="small" type="primary">上传现场图片</el-button>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>


    <div class="table-box">
      <el-table
        :data="tableData"
        style="width: 100%;">
        <el-table-column width="50" prop="radio" label=""></el-table-column>
        <el-table-column width="120" prop="materielNum" label="物料编码"></el-table-column>
        <el-table-column width="120" prop="materielName" label="物料名称"></el-table-column>
        <el-table-column width="120" prop="Specifications" label="规格型号"></el-table-column>
        <el-table-column width="120" prop="basic" label="基本计量单位"></el-table-column>
        <el-table-column width="120" prop="quantityOrder" label="订货数量"></el-table-column>
        <el-table-column width="150" prop="production" label="生产阶段">
          <template solt-scope="scope">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in ['阶段一','阶段二']"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column width="170" prop="date" label="汇报时间">
          <template solt-scope="scope">
            <el-date-picker type="date" clearable :editable="false" placeholder="汇报时间"></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column  prop="quantityCompleted" label="完工数量">
          <template solt-scope="scope">
            <el-input placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column  prop="percentage" label="完成百分比"></el-table-column>
        <el-table-column width="170" prop="date1" label="预计完工时间">
          <template solt-scope="scope">
            <el-date-picker type="date" clearable :editable="false" placeholder="预计完工时间"></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column  prop="PackingMaterials" label="包材情况">
          <template solt-scope="scope">
            <el-input placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="btnBox">
        <el-button type="primary">提交</el-button>
        <el-button type="primary">关闭</el-button>
      </div>
    </div>
  </div>

</template>

<script>
export default {
    name: "ProductionSchedule",
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        tableData: [
          {
            radio: '',
            materielNum: '物料编码',
            materielName: '物料名称',
            Specifications: '规格型号',
            basic: '基本计量单位',
            quantityOrder: '订货数量',
            production: '生产阶段',
            date: '',
            quantityCompleted: '',
            percentage: '完成百分比',
            date1: '',
            PackingMaterials: '', // 包材情况
          },
          {
            radio: '',
            materielNum: '物料编码',
            materielName: '物料名称',
            Specifications: '规格型号',
            basic: '基本计量单位',
            quantityOrder: '订货数量',
            production: '生产阶段',
            date: '',
            quantityCompleted: '',
            percentage: '完成百分比',
            date1: '',
            PackingMaterials: '', // 包材情况
          }
        ]
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
}
</script>

<style scoped="scoped">
  .addImg .el-upload--picture-card{
    background: #ffffff !important;
  }
  .el-upload-list{
    display: flex;
  }
  .el-upload-list li{
    width: 30%;
  }
  .table-box{
    margin-top: 30px;
  }
  .el-date-editor.el-input {
    width: 150px;
  }
  .btnBox{
    margin-top: 20px;
  }

</style>
